import UnlimitedMarquee from '@/components/UnlimitedMarquee/UnlimitedMarquee';
import { Space } from 'antd';
import Styles from './AlarmStatus.less';

interface AutoScrollTableProps {
  data: any[];
  maxHeight: number;
}

const colorMap = new Map<number, string>([
  [1, '#F54E4B'],
  [2, '#FF7A0C'],
  [3, '#FFD50C'],
]);

const AutoScrollTable: React.FC<AutoScrollTableProps> = ({ data, maxHeight }) => {
  // const [scrollTop, setScrollTop] = useState(0);
  // const [isHovering, setIsHovering] = useState(false);
  // const tableRef = useRef<HTMLDivElement>(null);
  // useEffect(() => {
  //   const intervalId = setInterval(() => {
  //     if (!isHovering) {
  //       setScrollTop((prevScrollTop) => {
  //         const newScrollTop = prevScrollTop + 1;
  //         const maxScrollTop = tableRef.current!.scrollHeight - maxHeight;
  //
  //         return newScrollTop > maxScrollTop ? 0 : newScrollTop;
  //       });
  //     }
  //   }, 100);
  //
  //   return () => clearInterval(intervalId);
  // }, [isHovering, maxHeight]);
  //
  // const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
  //   const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
  //   if (scrollTop + clientHeight === scrollHeight) {
  //     setScrollTop((prevScrollTop) => {
  //       const newData = data.slice();
  //       return prevScrollTop + newData.length;
  //     });
  //   } else {
  //     setScrollTop(scrollTop);
  //   }
  // };
  return (
    // <div
    //   style={{
    //     width: '100%',
    //     minHeight: '15.2rem',
    //     maxHeight: `${maxHeight}px`,
    //     overflowY: 'auto',
    //   }}
    //   ref={tableRef}
    //   onMouseEnter={() => setIsHovering(true)}
    //   onMouseLeave={() => setIsHovering(false)}
    //   onScroll={handleScroll}
    //   className={Styles.autoScrollTable}
    // >
    <div
      style={{
        width: '100%',
        minHeight: '15.2rem',
        maxHeight: `${maxHeight}px`,
      }}
    >
      {/*<table style={{ textAlign: 'center', width: '100%' }}>*/}
      {/*  <thead*/}
      {/*    style={{*/}
      {/*      zIndex: 100,*/}
      {/*      position: 'sticky',*/}
      {/*      top: 0,*/}
      {/*      backgroundColor: '#f2f3f5',*/}
      {/*    }}*/}
      {/*  >*/}
      {/*    <tr>*/}
      {/*      <th>序号</th>*/}
      {/*      <th style={{ width: '4rem' }}>等级</th>*/}
      {/*      <th style={{ width: 'auto' }}>事件描述</th>*/}
      {/*      <th style={{ width: '8rem' }}>位置ID</th>*/}
      {/*    </tr>*/}
      {/*  </thead>*/}
      <Space style={{ backgroundColor: '#f2f3f5', padding: '5px' }}>
        <div style={{ width: '40px' }}>序号</div>
        <div style={{ width: '80px' }}>等级</div>
        <div style={{ width: '140px' }}>事件描述</div>
        <div style={{ width: '150px' }}>位置ID</div>
      </Space>
      <UnlimitedMarquee
        speed={30}
        content={
          <ul style={{ minHeight: `${maxHeight - 20}px` }}>
            {data.map((item, index) => (
              <li key={index} style={{ height: '2.2rem', width: '100%', padding: '5px' }}>
                <Space>
                  <div style={{ width: '40px' }}>{index + 1}</div>
                  <div style={{ color: colorMap.get(item.level), width: '80px' }}>
                    {item.eventLevelName}
                  </div>
                  <div className={Styles.ellipsisText} title={item.eventDesc}>
                    {item.eventDesc}
                  </div>
                  <div className={Styles.ellipsisText} title={item.location}>
                    {item.location}
                  </div>
                </Space>
              </li>
            ))}
          </ul>
        }
      />
      {/*<tbody*/}
      {/*  style={{*/}
      {/*    transform: `translateY(-${scrollTop}px)`,*/}
      {/*  }}*/}
      {/*>*/}
      {/* */}
      {/*</tbody>*/}
      {/*</table>*/}
    </div>
  );
};

export default AutoScrollTable;
